var myChart;


// import * as uni from './uni.webview.1.5.2.js'
// import * as echarts from './echarts.min.js'
// import * as Vue from './vue.js'
// import qs from './js/qs.js'
// import axios from './js/axios.js'
// import { js_date_time, js_date_time_second, randomData } from './tool.js'
// import VueI18n from 'vue-i18n'


// <!-- vue html 交互 -->
document.addEventListener('UniAppJSBridgeReady', function() {
	uni.postMessage({
		data: {
			action: 'message'
		}
	});
	uni.getEnv(function(res) {
		// console.log('当前环境：' + JSON.stringify(res));
	});
})
// post请求封装
// function post(url,data) {
// 	let baseUrl='http://192.168.3.135:8080';
// 	return new Promise((resolve,reject)=>{
// 		axios({
// 			headers:{
// 				"Content-Type": "application/x-www-form-urlencoded",
// 			},
// 			method:'post',
// 			url:baseUrl+url,
// 			data:Qs.stringify( data || {})
// 		})
// 		.then(res=>{
// 			console.log(res)
// 			if(res.data.code==1){
// 				resolve(res.data)
// 			}else{
// 				reject()
// 				alertError('请求超时')
// 			}
// 		})
// 		.catch(err=>{
// 			alertError('请求超时')
// 		})
// 	})
// }
// 弹窗
function alertError(title) {
	document.addEventListener('plusready', function() {
		console.log('......')
	})
	try {
		plus.nativeUI.toast(title, {
			icon: '/static/common/toast-error.png',
			style: 'inline',
			verticalAlign: 'top'
		});
	} catch (e) {
		//TODO handle the exception
	}
}

let _self, rawData, dates, data, volumes;
let timer;
// 交易统计数据
var txData = {
	// 最新成交价
	"lastPrice": 8.944,
	// 涨幅
	"upRate": "-79.67%",
	// 1涨绿 2跌红
	"upFlag": "2",
	// 24小时交易量
	"volume": 3,
	// 24小时最高价
	"high": 11.922,
	// 24小时最低价
	"low": 8.944
}

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}
const i18n = new VueI18n({
  locale: 'ja', // 设置地区
  messages, // 设置地区信息
})

var app = new Vue({
	el: '#app1',
	i18n,
	data: {
		isInner: false,
		isIndex: 1,
		
		showList: false,
		showCurrencyIndex: 0,
		currencyList: ['BTC/USDT', 'BTC/USD', 'BTC/U'],
		tradingToday: {
			a: '23492460$',
			b: '+88.00',
			c: '+0.66%'
		},
		currentChartIndex: 0,
		
		category: 2,
		buyList: [],
		sellList: [],
		dealHis: [],
		
		
		balance: '7962', //积存金
		throwOutTotalAmount: '0.00', //抛出总金额
		
		
		showMask: false,
		buyStatus: 0, //即将下单的状态，0-买涨，1-买跌
		isDiy: false, //是否自定义
		amountLists: ['10$', '20$', '30$', '50$', '100$', '500$', '1000$', '2000$'],
		currentAmountIndex: -1,
		diyAmount: '', //自定义下单金额
		buyAmount: '', //已填下单金额
		expectedRevenue: '37', //预期收入
		period: '30', //结算周期
		currentPrice: '0', //当前价格
		// 
		MA5: '',
		MA10: '',
		MA30: '',
		volMA5: '',
		volMA10: '',
		// category: 1,
		// categoryList: [{
		// 		'label': '深度',
		// 		'value': 1
		// 	},
		// 	{
		// 		'label': '成交',
		// 		'value': 2
		// 	},
		// 	{
		// 		'label': '简介',
		// 		'value': 3
		// 	},
		// ],
		txData: {}, //交易数据统计
		// tokenInfo: {},
		// page: 1,
	},
	created() {
		_self = this;
		this.getTxData()
		// this.getDepth()
		this.getKLineData();
	},
	mounted() {
		myChart = echarts.init(document.getElementById('main'));
		console.log(myChart);
		this.draw()
		// this.getKline()
		
		this.getDepthList();
		this.getDealHis();
	},
	methods: {
		// 切换tab
		switchTab(val) {
			if (this.currentChartIndex == val) return;
			this.currentChartIndex = val;
			this.getKLineData();
		},
		openBuy(str) {
			switch (str) {
				case 'up':
					this.buyStatus = 0;
					// this.showMask = true;
					this.isDiy = false;
					uni.navigateTo({
						url: '/pages/buy/buy?buyStatus=0'
					})
					break;
				case 'down':
					this.buyStatus = 1;
					// this.showMask = true;
					this.isDiy = false;
					uni.navigateTo({
						url: '/pages/buy/buy?buyStatus=1'
					})
					break;
			}
		},
		inputNum(e) {
			console.log(e);
			this.currentAmountIndex = -1;
			// console.log(e.detail.value)
			// console.log(this.diyAmount);
			this.buyAmount = e.detail.value + '$';
			// console.log(this.buyAmount);
		},
		openBenefits() {
			uni.navigateTo({
				url: '/pages/welfare/welfare'
			})
		},
		goIndex(i) {
			switch (i) {
				case 'home':
					if (this.isIndex != 1) {
						uni.navigateTo({
							url: '/pages/index/index',
						})
					}
					break;
				case 'invitate':
					if (this.isIndex != 2) {
						uni.navigateTo({
							url: '/pages/invitation/invitation'
						})
					}
					break;
				case 'team':
					if (this.isIndex != 3) {
						uni.navigateTo({
							url: '/pages/team/team'
						})
					}
					break;
				case 'user':
					if (this.isIndex != 4) {
						uni.navigateTo({
							url: '/pages/user/user'
						})
					}
					break;
			}
		},
		getKLineData(){
			//可以加一个弹窗显示正在加载
			clearInterval(timer)
			return;/////////////注释解开
			timer = setInterval(()=>{
				axios.get('./FeHelper-20210603175700.json').then((data1)=>{
					// console.log(typeof data1);
					// result = JSON.parse(data1);
					result = data1;
					// console.log(result.data);
					let arr = [];
					for (let item of result.data) {
						let it = [js_date_time(item.id), +item.open, +item.close, +item.low, +item.high, +item.count];
						// console.log(it)
						arr.push(it)
					}
					setTimeout(() => {
						rawData = randomData(arr)
						
						dates = rawData.map(function(item) {
							return item[0];
						});
						data = rawData.map(function(item) {
							return [+item[1], +item[2], +item[3], +item[4], +item[5]];
						});
						volumes = rawData.map(function(item, index) {
							return [index, item[5], item[1] > item[2] ? 1 : -1];
						});
						
						this.getKline()
					})
				})
			}, 2000)
		},
		// -----------

		// 获取24小时交易数据统计
		getTxData() {
			this.txData = txData;
		},
		// 获取k线数据,生成k线
		getKline() {
			console.log('获取k线数据,生成k线');
			var dataMA5 = this.calculateMA(5, data);
			var dataMA10 = this.calculateMA(10, data);
			var dataMA30 = this.calculateMA(30, data);
			var volumeMA5 = this.calculateMA(5, volumes);
			var volumeMA10 = this.calculateMA(10, volumes);
			myChart.setOption({
				xAxis: [{
						data: dates
					},
					{
						data: dates
					},
				],
				series: [{
						name: '日K',
						data: data
					},
					{
						name: 'MA5',
						data: dataMA5
					},
					{
						name: 'MA10',
						data: dataMA10
					},
					{
						name: 'MA30',
						data: dataMA30
					},
					{
						name: 'Volume',
						data: volumes
					},
					{
						name: 'VolumeMA5',
						data: volumeMA5
					},
					{
						name: 'VolumeMA10',
						data: volumeMA10
					},
				]
			})
			//关闭正在加载
		},
		// 列表条数不足补全
		addItem(list, type) {
			// type: 1开头加，2末尾加
			list = list || [];
			let len = 20 - list.length;
			if (len > 0) {
				for (let i = 0; i < len; i++) {
					if (type == 1) {
						list.unshift({})
					} else {
						list.push({})
					}
				}
			}
			return list;
		},
		
		// 获取指定区间随机数
		sum(m,n){
			var num = Math.floor(Math.random()*(m - n) + n);
			return num;
		},
		// 获取深度数据（委托订单）
		getDepthList(){
			let obj={
				buyList:[],
				sellList:[]
			};
			for(let i=0;i<20;i++){
				obj.buyList.push({
					"price": 0.988,
					"amount": 12,
					'width':this.sum(1,100)
				})
				obj.sellList.push({
					"price": 0.252,
					"amount": 15,
					'width':this.sum(1,100)
				})
			}
			this.buyList = this.addItem(obj.buyList || [])
			this.sellList = this.addItem(obj.sellList || [])
		},
		// 成交列表
		getDealHis(){
			let arr=[];
			for(let i =0;i<20;i++){
				arr.push({
					"date": "07-22 16:27:44",
					// 1买入 2卖出
					"takerFlag": "1",
					"price": 44,
					"amount": 444
				})
			}
			this.dealHis = arr;
			// console.log(arr);
		},

		
		// 切换类目
		switchCategory(val) {
			if (this.category == val) return;
			this.category = val;
			if (this.category == 1) {
				this.getDepthList()
			} else if (this.category == 2) {
				this.getDealHis()
			}
		},
		// 截取数字字符串 保留precision小数
		formatterNum(value, precision) {
			// console.log(value)
			let reg = new RegExp('^\\d+(?:\\.\\d{0,' + precision + '})?')
			return value.toString().match(reg)
		},
		// 计算MA
		calculateMA(dayCount, data) {
			var result = [];
			for (var i = 0, len = data.length; i < len; i++) {
				if (i < dayCount) {
					result.push('-');
					continue;
				}
				var sum = 0;
				for (var j = 0; j < dayCount; j++) {
					sum += data[i - j][1];
				}
				// console.log(sum, dayCount)
				result.push((sum / dayCount).toFixed(2));
			}
			return result;
		},
		// 绘制(配置项)
		draw() {
			let that = this;
			var upColor = '#4BFFA4';
			var downColor = '#F10641';
			var colorList = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3' ];
			var labelFont = 'bold 12px Sans-serif';
			var option = {
				backgroundColor: '#0d1723',
				title: {
					show: false
				},
				legend: {
					show: false
				},
				visualMap: {
					show: false,
					seriesIndex: 4,
					dimension: 2,
					pieces: [{
						value: 1,
						color: downColor
					}, {
						value: -1,
						color: upColor
					}]
				},
				grid: [{
						top: '8%',
						left: 5,
						// right: 50,
						right: '20%',
						height: '60%'
					},
					{
						top: '68%',
						left: 5,
						// right: 50,
						right: '20%',
						height: '26%'
					},
				],
				axisPointer: { //坐标轴指示器配置项
					link: {
						xAxisIndex: 'all'
					},
					label: {
						backgroundColor: '#0d1723',
						color: '#fff',
						borderColor: 'rgb(99, 117, 139)',
						borderWidth: 1,
						borderRadius: 2,
						fontSize: 10
					}
				},
				xAxis: [{
					type: 'category', //坐标轴类型。(value:数值轴，适用于连续数据。,category:类目轴，适用于离散的类目数据,time: 时间轴，适用于连续的时序数据,log:对数轴。适用于对数数据)
					data: [], //类目数据，在类目轴（type: 'category'）中有效。
					scale: true,
					boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
					axisLine: {
						show: false
					}, //坐标轴轴线相关设置
					axisTick: {
						show: false
					}, //坐标轴刻度相关设置。
					axisLabel: {
						show: false,
					}, //坐标轴刻度标签的相关设置。
					splitLine: {
						show: false,
						lineStyle: {
							color: 'rgba(255,255,255, 0.1)'
						}
					}, //坐标轴在 grid 区域中的分隔线。
					min: 'dataMin', //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
					max: 'dataMax', //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。
					axisPointer: {
						label: {
							margin: 200
						}
					},
				}, {
					type: 'category',
					gridIndex: 1, //x 轴所在的 grid 的索引，默认位于第一个 grid。
					data: [], //类目数据，在类目轴（type: 'category'）中有效。
					scale: true,
					boundaryGap: false, //坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
					axisLine: {
						show: false,
						lineStyle: {
							color: 'rgba(255,255,255,1)',
							width: 1
						}
					}, //坐标轴轴线相关设置
					axisTick: {
						show: false
					}, //坐标轴刻度相关设置。
					axisLabel: { //坐标轴刻度标签的相关设置。
						show: true,
						margin: 6,
						fontSize: 10,
						color: 'rgba(99, 117, 139, 1.0)',
						formatter: function(value) {
							return echarts.format.formatTime('MM-dd', value);
						}
					},
					splitNumber: 20,
					splitLine: {
						show: false,
						lineStyle: {
							color: 'rgba(255,255,255, 0.1)'
						}
					}, //坐标轴在 grid 区域中的分隔线。
					min: 'dataMin', //坐标轴刻度最小值。可以设置成特殊值 'dataMin'，此时取数据在该轴上的最小值作为最小刻度。
					max: 'dataMax', //坐标轴刻度最大值。可以设置成特殊值 'dataMax'，此时取数据在该轴上的最大值作为最大刻度。
					// axisPointer: { show: true, type: 'none', label: { show: false }},
				}],
				yAxis: [{
					type: 'value', //坐标轴类型。(value:数值轴，适用于连续数据。,category:类目轴，适用于离散的类目数据,time: 时间轴，适用于连续的时序数据,log:对数轴。适用于对数数据)
					position: 'right', //y 轴的位置。'left','right'
					scale: true, //是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。(在设置 min 和 max 之后该配置项无效。)
					axisLine: {
						show: false
					}, //坐标轴轴线相关设置。
					axisTick: {
						show: false,
						inside: true
					}, //坐标轴刻度相关设置。
					axisLabel: { //坐标轴刻度标签的相关设置。
						show: true,
						color: 'rgba(99, 117, 139, 1.0)',
						inside: true,
						fontSize: 10,
						formatter: function(value) {
							return Number(value).toFixed(2)
						}
					},
					splitLine: {
						show: false,
						lineStyle: {
							color: 'rgba(255,255,255, 0.1)'
						}
					}, //坐标轴在 grid 区域中的分隔线。
					offset: 60
				}, {
					type: 'value',
					position: 'right',
					scale: true,
					gridIndex: 1,
					axisLine: {
						show: false
					},
					axisTick: {
						show: false,
						// show: true,
						inside: true,
						fontSize: 10,
						formatter: function(value) {
							return Number(value).toFixed(2)
						}
					},
					axisLabel: {
						// show: false
						show: true,
						color: 'rgba(99, 117, 139, 1.0)',
						inside: true,
						fontSize: 10,
						formatter: function(value) {
							return Number(value).toFixed(2)
						}
					},
					splitLine: {
						show: false
					},
					offset: 60
				}],

				animation: false, //是否开启动画。
				color: colorList,
				tooltip: {
					show: true, //是否显示提示框组件，包括提示框浮层和 axisPointer。
					trigger: 'axis', //触发类型。item,axis,none
					formatter(params) {
						let tooltip = '';
						let time = '',
							open = 0,
							high = 0,
							low = 0,
							close = 0,
							amount = 0;
						for (var i = 0; i < params.length; i++) {
							if (params[i].seriesName === '日K') {
								time = params[i].name;
								open = params[i].data.length > 1 ? Number(that.formatterNum(params[i].data[
									1], 2)) : 0;
								close = params[i].data.length > 1 ? Number(that.formatterNum(params[i].data[
									2], 2)) : 0;
								low = params[i].data.length > 1 ? Number(that.formatterNum(params[i].data[
									3], 2)) : 0;
								high = params[i].data.length > 1 ? Number(that.formatterNum(params[i].data[
									4], 2)) : 0;
								amount = params[i].data.length > 1 ? Number(that.formatterNum(params[i]
									.data[5], 2)) : 0;
								// console.log(time,open,close,low,high,amount)
								tooltip = '<div class="charts-tooltip">' +
									'<div class="charts-tooltip-row"><div class="ctr-label">' + '时间' +
									'</div><div class="ctr-value">' + time + '</div></div>' +
									'<div class="charts-tooltip-row"><div class="ctr-label">' + '开' +
									'</div><div class="ctr-value">' + open + '</div></div>' +
									'<div class="charts-tooltip-row"><div class="ctr-label">' + '高' +
									'</div><div class="ctr-value">' + high + '</div></div>' +
									'<div class="charts-tooltip-row"><div class="ctr-label">' + '低' +
									'</div><div class="ctr-value">' + low + '</div></div>' +
									'<div class="charts-tooltip-row"><div class="ctr-label">' + '收' +
									'</div><div class="ctr-value">' + close + '</div></div>' +
									'<div class="charts-tooltip-row"><div class="ctr-label">' + '数量' +
									'</div><div class="ctr-value">' + amount + '</div></div></div>';
							}
							if (params[i].seriesName === 'MA5') {
								that.MA5 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i]
									.data, 2)) : 0
							}
							if (params[i].seriesName === 'MA10') {
								that.MA10 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i]
									.data, 2)) : 0
							}
							if (params[i].seriesName === 'MA30') {
								that.MA30 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i]
									.data, 2)) : 0
							}
							if (params[i].seriesName === 'VolumeMA5') {
								that.volMA5 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i]
									.data, 2)) : 0
							}
							if (params[i].seriesName === 'VolumeMA10') {
								that.volMA10 = params[i].data !== 'NAN' ? Number(that.formatterNum(params[i]
									.data, 2)) : 0
							}
						}
						return tooltip;
					},
					triggerOn: 'click', //提示框触发的条件 'mousemove','click','mousemove|click','none'
					textStyle: {
						fontSize: 10
					}, //提示框浮层的文本样式
					backgroundColor: 'rgba(30,42,66,0.8);', //提示框浮层的背景颜色。
					borderColor: '#2f3a56', //提示框浮层的边框颜色。
					borderWidth: 2,
					position: function(pos, params, el, elRect, size) { //提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。
						var obj = {
							top: 20
						};
						obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 10;
						return obj;
					},
					axisPointer: { //坐标轴指示器配置项。
						label: {
							color: 'rgba(255,255,255,.87)',
							fontSize: 9,
							backgroundColor: '#020204',
							borderColor: "#9c9fa4",
							shadowBlur: 0,
							borderWidth: 0.5,
							padding: [4, 2, 3, 2],
						},
						animation: false,
						type: 'cross',
						lineStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: 'rgba(30, 42, 66, 0.1)' // 0% 处的颜色
								}, {
									offset: 0.7,
									color: 'rgba(30, 42, 66,0.9)' // 100% 处的颜色
								}, {
									offset: 1,
									color: 'rgba(30, 42, 66,0.2)' // 100% 处的颜色
								}]
							},
							width: 10,
							shadowColor: 'rgba(30, 42, 66,0.7)',
							shadowBlur: 0,
							shadowOffsetY: 68,
						}
					}
				},

				dataZoom: [{ //用于区域缩放
					type: 'inside',
					xAxisIndex: [0, 1],
					realtime: false,
					start: 50,
					end: 100,
				}],
				series: [
					{
						type: 'candlestick',
						name: '日K',
						data: [],
						itemStyle: {
							color: upColor,
							color0: downColor,
							borderColor: upColor,
							borderColor0: downColor
						},
						markPoint: {
							symbol: 'rect',
							symbolSize: [-10, 0.5],
							symbolOffset: [5, 0],
							itemStyle: {
								color: 'rgba(255,255,255,.87)'
							},
							label: {
								color: 'rgba(255,255,255,.87)',
								offset: [10, 0],
								fontSize: 10,
								align: 'left',
								formatter: function(params) {
									return Number(params.value).toFixed(2)
								}
							},
							data: [{
									name: 'max',
									type: 'max',
									valueDim: 'highest'
								},
								{
									name: 'min',
									type: 'min',
									valueDim: 'lowest'
								}
							]
						},
					},
					{
						name: 'MA5',
						type: 'line',
						data: [],
						symbol: 'none', //去除圆点
						smooth: true,
						lineStyle: {
							normal: {
								opacity: 1,
								width: 1,
								color: "#eef4ba"
							}
						},
						z: 5
					},
					{
						name: 'MA10',
						type: 'line',
						data: [],
						symbol: 'none', //去除圆点
						smooth: true,
						lineStyle: {
							normal: {
								opacity: 1,
								width: 1,
								color: '#83c1c5'
							}
						},
						z: 4
					},
					{
						name: 'MA30',
						type: 'line',
						data: [],
						symbol: 'none', //去除圆点
						smooth: true,
						lineStyle: {
							normal: {
								opacity: 1,
								width: 1,
								color: '#b39cd8'
							}
						},
						z: 3
					},
					{
						name: 'Volume',
						type: 'bar',
						xAxisIndex: 1,
						yAxisIndex: 1,
						data: []
					},
					{
						name: 'VolumeMA5',
						type: 'line',
						xAxisIndex: 1,
						yAxisIndex: 1,
						data: [],
						symbol: 'none', //去除圆点
						smooth: true,
						lineStyle: {
							normal: {
								opacity: 1,
								width: 1,
								color: "#eef4ba"
							}
						},
						z: 5
					},
					{
						name: 'VolumeMA10',
						type: 'line',
						xAxisIndex: 1,
						yAxisIndex: 1,
						data: [],
						symbol: 'none', //去除圆点
						smooth: true,
						lineStyle: {
							normal: {
								opacity: 1,
								width: 1,
								color: '#83c1c5'
							}
						},
						z: 4
					},
				]
			};
			myChart.setOption(option);
			// 加载上一页数据
			myChart.on('datazoom', function(params) {
				let num = params.batch[0]['start'];
				if (num == 0) {
					console.log('到最左边了')
				}
			})
			window.addEventListener('resize', () => {
				myChart.resize()
			})
		}

	},
})

